<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <!-- <Demo2 msg="store模块分割的演示2" />
    <hr /> -->
    <Demo1 msg="store模块分割的演示1" />
    <hr />
    <Test8 msg="Action的应用" />
    <hr />
    <Test7 msg="Mutation的应用" />
    <hr />
    <Test6 msg="T6.Getter的应用" />
    <hr />
    <Test4 msg="对象展开运算符的应用" />
    <hr />
    <Test5 msg="mapState辅助函数传数组" />
    <hr />
    <Test3 msg="mapState辅助函数" />
    <hr />
    <Counter msg="Vue组件中获得Vuex状态" />
    <hr />
    <Test1 msg="T1.简单的Vue计数应用" />
  </div>
</template>

<script>
import Test1 from "./components/Test1.vue";
import Test2 from "./components/Test2.vue";
import Counter from "./components/Counter.vue";
import Test3 from "./components/Test3.vue";
import Test4 from "./components/Test4.vue";
import Test5 from "./components/Test5.vue";
import Test6 from "./components/Test6.vue";
import Test7 from "./components/Test7.vue";
import Test8 from "./components/Test8.vue";

import Demo1 from "./components/Demo1.vue";
import Demo2 from "./components/Demo2.vue";

export default {
  /**
   * 组件名称
   */
  name: "App",
  /**
   * 组件注册
   */
  components: {
    Test1: Test1,
    Test2: Test2,
    Test3: Test3,
    Test4: Test4,
    Test5: Test5,
    Test6: Test6,
    Test7: Test7,
    Test8: Test8,
    Counter: Counter,
    Demo1: Demo1,
    Demo2: Demo2,
  },
};
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
